import { useState } from "react";
import { PlusOutlined } from "@ant-design/icons";

// eslint-disable-next-line no-undef
const { TextArea } = Input;
function ProjectList() {
  const [open, setOpen,confirmLoading, setConfirmLoading] = useState(false);
  const [loading,setLoading] = useState(true);
  const showModal = () => {
    setOpen(true);
  };
  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };
  const handleCancel = () => {
    console.log("Clicked cancel button");
    setOpen(false);
  };

  setTimeout(()=>{
    setLoading(false)
  },2000)


  // 表单
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
        新建
      </Button>
      <Divider></Divider>
      <Row gutter={[20, 40]}>
        {new Array(21).fill(0).map((self, index) => {
          return (
            <Col
              key={"projectList" + index}
              style={{ display: "flex", justifyContent: "center" }}
              span={4}
            >
              <Card
                loading={loading}
                hoverable
                style={{
                  width: 300,
                }}
                cover={
                  <img
                    style={{ "objectFit": "cover" }}
                    height="100"
                    alt="example"
                    src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                  />
                }
              >
                {"project" + index}
              </Card>
            </Col>
          );
        })}
      </Row>
      <Modal
        centered
        title="新建项目"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 22,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="名称"
            name="username"
            placeholder="请输入名称"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="描述"
            name="password"
          >
            <TextArea rows={4} placeholder="请输入描述" maxLength={100} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
export default ProjectList;
